<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>视差滚动原理儿</title>
</head>
<style>
.article{
	width: 960px;
	margin: 0 auto;
	height: 800px;
	padding: 40px;
	font: 18px/1.5 'Microsoft YaHei';
	overflow: hidden;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}
.section1{
	background-image: url( section01.jpg);
}
.section2{
	background-image: url( section02.jpg);
}
.section3{
	background-image: url( section03.jpg);
}
.title{
	font: 32px/1.5 '微软雅黑';
	position: relative;
	top: -100px;
}
.content{
	position: relative;
	top: 380px;
	left: 1024px;
	color: #777;
}
.section1 .title{
	color: white;
}
.section2 .title{
	color: #FF8500;
}
.section3 .title{
	opacity: 0;
	top: 360px;
	color: #747474;
}
.title-anim{
	top: 360px;
	-webkit-transition : all 1s;
	-moz-transition : all 1s;
	-ms-transition : all 1s;
	transition : all 1s;
}
.title-anim2{
	opacity: 1!important;
	-webkit-transition : all 2s;
	-moz-transition : all 2s;
	-ms-transition : all 2s;
	transition : all 2s;
}
.content-anim{
	left: 0px;
	-webkit-transition : all 1s;
	-moz-transition : all 1s;
	-ms-transition : all 1s;
	transition : all 1s;
}
</style>
<body>
<div id="articles">
	<div id="article1" class="article section1">
		<div id="title1" class="title">
			章节·一  每当我加班凌晨，独自一人走在黑暗的回家路上
		</div>
		<div id="content1" class="content">
			我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
			我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
			我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
		</div>
	</div>
	<div class="article section2">
		<div  id="title2" class="title">
			章节·二  我会想起那天夕阳下的奔跑
		</div>
		<div id="content2" class="content">
			我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
			我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
			我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
		</div>
	</div>
	<div class="article section3">
		<div  id="title3" class="title">
			章节·三  那是我逝去的，青春
		</div>
		<div id="content3" class="content">
			我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你
			我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你
			我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你我喜欢你
		</div>
	</div>
</div>

<script>
	var articleHeight = document.getElementById('article1').clientHeight;
	var title1 = document.getElementById('title1'),
		title2 = document.getElementById('title2'),
		title3 = document.getElementById('title3');
	var content1 = document.getElementById('content1'),
		content2 = document.getElementById('content2'),
		content3 = document.getElementById('content3');
	window.addEventListener('scroll',scrollHandler);

	function scrollHandler(e){
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		if(scrollTop > 0 && scrollTop < articleHeight){
			title1.classList.add('title-anim');
			content1.classList.add('content-anim');
		}else if(scrollTop >= articleHeight && scrollTop < articleHeight*2){
			title2.classList.add('title-anim');
			content2.classList.add('content-anim');
		}else if(scrollTop >= articleHeight*2 && scrollTop < articleHeight*3){
			title3.classList.add('title-anim2');
			content3.classList.add('content-anim');
		}
	}
</script>

</body>
</html>